<template>
  <view class="test-container">
    <view class="header">
      <text class="title">登录注册测试</text>
    </view>
    
    <view class="form-section">
      <view class="form-card">
        <text class="section-title">登录测试</text>
        
        <input 
          v-model="loginForm.mobile" 
          placeholder="手机号" 
          type="number"
          class="input-field"
        />
        
        <input 
          v-model="loginForm.password" 
          placeholder="密码" 
          password
          class="input-field"
        />
        
        <button @click="testLogin" class="test-btn login-btn" :disabled="loginLoading">
          {{ loginLoading ? '登录中...' : '测试登录' }}
        </button>
      </view>
      
      <view class="form-card">
        <text class="section-title">注册测试</text>
        
        <input 
          v-model="registerForm.username" 
          placeholder="用户名" 
          class="input-field"
        />
        
        <input 
          v-model="registerForm.mobile" 
          placeholder="手机号" 
          type="number"
          class="input-field"
        />
        
        <input 
          v-model="registerForm.password" 
          placeholder="密码" 
          password
          class="input-field"
        />
        
        <picker @change="onRoleChange" :value="roleIndex" :range="roles">
          <view class="picker-field">
            角色: {{ roles[roleIndex] }}
          </view>
        </picker>
        
        <button @click="testRegister" class="test-btn register-btn" :disabled="registerLoading">
          {{ registerLoading ? '注册中...' : '测试注册' }}
        </button>
      </view>
    </view>
    
    <view class="result-section" v-if="result">
      <text class="result-title">测试结果:</text>
      <text class="result-text">{{ result }}</text>
    </view>
  </view>
</template>

<script>
import { login, register } from '@/api/auth'

export default {
  data() {
    return {
      loginForm: {
        mobile: '13800138000',
        password: '123456'
      },
      registerForm: {
        username: 'testuser',
        mobile: '13900139000',
        password: '123456',
        role: 'PARENT'
      },
      roles: ['家长', '教员'],
      roleIndex: 0,
      loginLoading: false,
      registerLoading: false,
      result: ''
    }
  },
  
  methods: {
    async testLogin() {
      this.loginLoading = true
      this.result = ''
      
      try {
        console.log('发起登录请求:', this.loginForm)
        const response = await login(this.loginForm)
        console.log('登录响应:', response)
        
        this.result = `登录成功！\nToken: ${response.data.token}\n用户ID: ${response.data.userId}\n用户名: ${response.data.username}`
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('登录失败:', error)
        this.result = `登录失败: ${error.message || '未知错误'}`
        
        uni.showToast({
          title: '登录失败',
          icon: 'error'
        })
      } finally {
        this.loginLoading = false
      }
    },
    
    async testRegister() {
      this.registerLoading = true
      this.result = ''
      
      try {
        console.log('发起注册请求:', this.registerForm)
        const response = await register(this.registerForm)
        console.log('注册响应:', response)
        
        this.result = `注册成功！\nToken: ${response.data.token}\n用户ID: ${response.data.userId}\n用户名: ${response.data.username}`
        
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('注册失败:', error)
        this.result = `注册失败: ${error.message || '未知错误'}`
        
        uni.showToast({
          title: '注册失败',
          icon: 'error'
        })
      } finally {
        this.registerLoading = false
      }
    },
    
    onRoleChange(e) {
      this.roleIndex = e.detail.value
      this.registerForm.role = this.roleIndex === 0 ? 'PARENT' : 'TEACHER'
    }
  }
}
</script>

<style lang="scss" scoped>
.test-container {
  padding: 40rpx;
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-section {
  margin-bottom: 40rpx;
}

.form-card {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
  }
}

.input-field {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  
  &:focus {
    border-color: #3cc51f;
  }
}

.picker-field {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  background: white;
}

.test-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: white;
  border: none;
  margin-top: 20rpx;
  
  &.login-btn {
    background: linear-gradient(45deg, #3cc51f, #5daf34);
  }
  
  &.register-btn {
    background: linear-gradient(45deg, #ff6b6b, #ff8a80);
  }
  
  &:disabled {
    opacity: 0.6;
  }
}

.result-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  
  .result-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .result-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    white-space: pre-line;
  }
}
</style> 